<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('NPE1YNWzGs_fCi4sf8x-p')}}</p>
      <div class="wrap-operate-container">
        <div class="wrap-operate-area" style="width: 95%;">
          <div class="operate-select-item">
            <label class="title">{{$t('ukexJfHe1YBGx8B9XnGdu')}}:</label>
            <div class="content">
              <Select
                v-model="pileCode"
                style="width: 200px"
                clearable 
                @on-change="getGunInfo"
              >
                <Option
                  v-for="item in pileCodes"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </Option>
              </Select>
            </div>
          </div>
          <div class="operate-select-item">
            <label class="title">{{$t('wgRc7OlPa8xt5Gum1570-')}}:</label>
            <div class="content">
              <Select
                v-model="gunNumber"
                style="width: 200px"
                clearable 
              >
                <Option
                  v-for="item in gunNumbers"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </Option>
              </Select>
            </div>
          </div>
          <div class="operate-input-item">
            <Input v-model="icNumber" @on-enter="queryTable">
              <span slot="prepend">{{$t('rCioHLIJbqQPT_GD6hOEZ')}}：</span>
              <Button
                slot="append"
                icon="ios-search"
                @click="queryTable"
              ></Button>
            </Input>
          </div>
          <div class="operate-input-item">
            <Input
              v-model="cellPhoneAccount"
              @on-enter="queryTable"
            >
              <span slot="prepend">{{$t('ggdgmNf2iQVSf4KyNPz6e')}}：</span>
              <Button
                slot="append"
                icon="ios-search"
                @click="queryTable"
              ></Button>
            </Input>
          </div>
          <!-- <div class="operate-input-item">
            <Input v-model="carNumber" @on-enter="queryTable">
              <span slot="prepend">{{$t('M0SWlK7GRCyXb6WvRMZgb')}}：</span>
              <Button
                slot="append"
                icon="ios-search"
                @click="queryTable"
              ></Button>
            </Input>
          </div>
          <div class="operate-input-item">
            <Input v-model="cardOwner" @on-enter="queryTable">
              <span slot="prepend">{{$t('56vXCivLJ43HZO4QrXiG-')}}：</span>
              <Button
                slot="append"
                icon="ios-search"
                @click="queryTable"
              ></Button>
            </Input>
          </div> -->
          <div class="operate-timepicker-item">
            <label class="title">{{$t('0wHMQB7iHzb8-c7fwSLih')}}:</label>
            <div class="content">
              <DatePicker
                v-model="timescope"
                type="datetimerange"
                format="yyyy-MM-dd HH:mm:ss"
                :placeholder="$t('4yP5zHObfE9vFzhk3a6yk')"
                style="width: 300px"
                :options="datepickOptions"
              ></DatePicker>
            </div>
          </div>
          <div class="operate-btn-item">
            <Button class="item" type="info" icon="ios-search" @click="queryTable"
              >{{$t('9ZYL6riI1fheWqEf_uo-M')}}</Button
            >
            <Button
              class="item"
              type="info"
              icon="ios-card"
              @click="exportExcel"
              >{{$t('ssHl1qTS2oMuNp3RZnkQY')}}</Button
            >
          </div>
        </div>
        <div class="wrap-indicate-area" style="width: 80%; margin: 10px 0;">
          <div class="indicate-item">
            <label class="title">{{$t('XVGOywKkHYeCjM5b1JHVO')}}：</label>
            <span class="content">{{ count }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('PuZBkrm-5EoN79Q7ClmDC')}}(kWh)：</label>
            <span class="content">{{ electric }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('UrRW1TPYc3O8ze3OO8auz')}}({{$t('rEwoS7D6EkR6EPGHSq6MU')}})：</label>
            <span class="content">{{ money }}</span>
          </div>
          <div class="indicate-item" style="visibility:hidden">
            <label class="title">{{$t('CXryvEgstPDHzRzGTlXI7')}}({{$t('rEwoS7D6EkR6EPGHSq6MU')}})：</label>
            <span class="content">{{ pumpedIncome }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('qHSl39HW3iQCSU6ue_Lmi')}}(kWh)：</label>
            <span class="content">{{ cuspelect }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('ng6ofc8iIPQwALSXS2Gc3')}}(kWh)：</label>
            <span class="content">{{ peakelect }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('Q6GKnQqFJSuf6zl_oJJV_')}}(kWh)：</label>
            <span class="content">{{ flatelect }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('hHrpxlqPeykIlo0elNOew')}}(kWh)：</label>
            <span class="content">{{ valleyelect }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('sxAt-jm3sLdAMdQ2ikVrk')}}({{$t('rEwoS7D6EkR6EPGHSq6MU')}})：</label>
            <span class="content">{{ cuspmoney }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('uu5mBR2Seq62JH78Ichrc')}}({{$t('rEwoS7D6EkR6EPGHSq6MU')}})：</label>
            <span class="content">{{ peakmoney }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('wEpjuPFt-oKpiBJbixUI0')}}({{$t('rEwoS7D6EkR6EPGHSq6MU')}})：</label>
            <span class="content">{{ flatmoney }}</span>
          </div>
          <div class="indicate-item">
            <label class="title">{{$t('SRD5Ld59tJ259-VQ6FTOc')}}({{$t('rEwoS7D6EkR6EPGHSq6MU')}})：</label>
            <span class="content">{{ valleymoney }}</span>
          </div>
        </div>
      </div>
      <Table 
        ref="table" 
        :loading="loading" 
        :columns="columns" 
        :data="data" 
        no-filtered-data-text=""
      />
    </Card>
  </div>
</template>

<script>
import moment from 'moment'
import { queryChargeRecord, getEquipmentlist, queryPileStatusList } from '@/api/data2'

export default {
  name: 'charge_history',
  data () {
    return {
      pileCode: '',
      pileCodes: [],
      gunNumber: '',
      gunNumbers: [],
      icNumber: '',
      cellPhoneAccount: '',
      carNumber: '',
      cardOwner: '',
      starttime: moment(0, 'HH').format('YYYY-MM-DD HH:mm:ss'),
      endtime: moment(0, 'HH').add(1, 'days').subtract(1, 'seconds').format('YYYY-MM-DD HH:mm:ss'),
      // timescope: [moment(0, 'HH').toDate(), moment().toDate()],
      count: '',
      electric: '',
      money: '',
      pumpedIncome: '',
      cuspelect: '',
      peakelect: '',
      flatelect: '',
      valleyelect: '',
      cuspmoney: '',
      peakmoney: '',
      flatmoney: '',
      valleymoney: '',
      loading: false,
      columns: [
        {
          title: this.$t('pfCKr_aRAOfo7RtXQCfFx'),
          key: 'id',
          width: 100,
          fixed: 'left'
        },
        {
          title: this.$t('NNqwsiYKNFh8WR5Mvlwed'),
          key: 'stationname',
          width: 150,
          fixed: 'left'
        },
        {
          title: this.$t('dUE9V6jUHBdS6m9avfiqp'),
          key: 'equipmentname',
          width: 150
        },
        {
          title: this.$t('ggdgmNf2iQVSf4KyNPz6e'),
          key: 'userid',
          width: 150
        },
        {
          title: this.$t('ukexJfHe1YBGx8B9XnGdu'),
          key: 'equipmentid',
          width: 150
        },
        {
          title: this.$t('OBojq5D694WY1CWDUxEBu'),
          key: 'number',
          width: 150
        },
        {
          title: this.$t('U8ZxEg6llVjAqWal8YnPQ'),
          key: 'connectorid',
          width: 150
        },
        {
          title: this.$t('_U-ZtVG4JB3EY66WR98OJ'),
          key: 'equipmenttype',
          width: 150
        },
        {
          title: this.$t('48ACPMfaAFoJkisiOq19d'),
          key: 'billid',
          width: 150
        },
        {
          title: this.$t('GH-oj97VMxjUSKYEwvbAY'),
          key: 'payinfototalfee',
          width: 150
        },
        {
          title: this.$t('UC2NRV8FUhD7TLFCjKYY8') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'refundamount',
          width: 150
        },
        {
          title: this.$t('gCXbsZM2YRaIdMLCnDrVr'),
          key: 'refunddt',
          width: 150
        },
        {
          title: 'VIN',
          key: 'batt_vin',
          width: 150
        },
        {
          title: this.$t('M0SWlK7GRCyXb6WvRMZgb'),
          key: 'carnum',
          width: 150
        },
        {
          title: this.$t('AVRXsWxpDtODL8T1R6grj') + '（Ah）',
          key: 'batt_capacity',
          width: 150
        },
        {
          title: this.$t('wALhomxX4YRD0voPovVM0') + '(V)',
          key: 'batt_ratevoltage',
          width: 150
        },
        {
          title: this.$t('gz_QQq9UDq7aHpTYuWYhK')  + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'cardbeforefee',
          width: 150
        },
        {
          title: this.$t('CjyPse9XVaZNs8kCThSuS')  + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'cardafterfee',
          width: 150
        },
        {
          title: this.$t('rCioHLIJbqQPT_GD6hOEZ'),
          key: 'cardid',
          width: 150
        },
        {
          title: this.$t('56vXCivLJ43HZO4QrXiG-'),
          key: 'cardpeople',
          width: 150
        },
        {
          title: this.$t('Dl_XYXdSr6xhI9rMZwbLh'),
          key: 'nickname',
          width: 150
        },
        {
          title: this.$t('wTzrSugAOyWuLLaG6MobE'),
          key: 'startreason',
          width: 150
        },
        {
          title: this.$t('iezrwIPqa_uDAOgw9K85J'),
          key: 'starttime',
          width: 150
        },
        {
          title: this.$t('IDOcWRm6GglMUdoEWAFNN'),
          key: 'startmeter',
          width: 150
        },
        {
          title: this.$t('Lf-NYrmhdsbXhz01WSc0t'),
          key: 'startsoc',
          width: 150
        },
        {
          title: this.$t('gVEmdwEv_0fuY-9gmwNS-'),
          key: 'endsoc',
          width: 150
        },
        {
          title: this.$t('dzGQaCqIPj95fYBlmVK5Z'),
          key: 'endreason',
          width: 150
        },
        {
          title: this.$t('-ff9FAIRuHOIClpeqIfvZ'),
          key: 'endtime',
          width: 150
        },
        {
          title: this.$t('MWRMwqDBXHX6hVxL5bBAk'),
          key: 'endmeter',
          width: 150
        },
        {
          title: this.$t('DyFHLriFxsvqhbeY8xUPW')  + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'money',
          width: 150
        },
        {
          title: this.$t('sgO8XTrpDs0hVu2JOZPmp') + '(kWh)',
          key: 'electric',
          width: 150
        },
        {
          title: this.$t('CWlkoZBYyweNDtnAEk1aP'),
          key: 'commver',
          width: 150
        },
        {
          title: this.$t('GOyVw5KDNjPYNc3iTInwM') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'cuspelectprice',
          width: 150
        },
        {
          title: this.$t('W6-ija9Ek-NImMawsVVzD') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'cuspserviceprice',
          width: 150
        },
        {
          title: this.$t('f14eocGEC66smOTM3Ksd8') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'peakelectprice',
          width: 150
        },
        {
          title: this.$t('VqSgOOoTo2f9K6dY66Pts') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'peakserviceprice',
          width: 150
        },
        {
          title: this.$t('VxULpcsWvjyao-8oC4pyv') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'flatelectprice',
          width: 150
        },
        {
          title: this.$t('Gf9xSuznsUiCuEZYlINz5') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'flatserviceprice',
          width: 150
        },
        {
          title: this.$t('UAZ_291mYGGDLDUrBdX8R') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'valleyelectprice',
          width: 150
        },
        {
          title: this.$t('kWpqTUh7cQRHY2LC8TF1j') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'valleyserviceprice',
          width: 150
        },
        {
          title: this.$t('qHSl39HW3iQCSU6ue_Lmi') + '(kWh)',
          key: 'cuspelect',
          width: 150
        },
        {
          title: this.$t('sxAt-jm3sLdAMdQ2ikVrk') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'cuspmoney',
          width: 150
        },
        {
          title: this.$t('ng6ofc8iIPQwALSXS2Gc3') + '(kWh)',
          key: 'peakelect',
          width: 150
        },
        {
          title: this.$t('uu5mBR2Seq62JH78Ichrc') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'peakmoney',
          width: 150
        },
        {
          title: this.$t('Q6GKnQqFJSuf6zl_oJJV_') + '(kWh)',
          key: 'flatelect',
          width: 150
        },
        {
          title: this.$t('wEpjuPFt-oKpiBJbixUI0') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'flatmoney',
          width: 150
        },
        {
          title: this.$t('hHrpxlqPeykIlo0elNOew') + '(kWh)',
          key: 'valleyelect',
          width: 150
        },
        {
          title: this.$t('SRD5Ld59tJ259-VQ6FTOc') + '(' + this.$t('rEwoS7D6EkR6EPGHSq6MU') + ')',
          key: 'valleymoney',
          width: 150
        }
      ],
      data: [],
      tableExcelName: this.$t('charge_history'),
      datepickOptions: {
        disabledDate: function (date) {
          return Date.now() < moment(date).valueOf()
        }
      }
    }
  },
  computed: {
    equipmentid () {
      return _.isNil(this.pileCode) ? '' : this.pileCode
    },
    gunnum () {
      return _.isNil(this.gunNumber) ? '' : this.gunNumber
    },
    timescope: {
      get () {
        return [this.starttime, this.endtime]
      },
      set (val) {
        this.starttime = moment(val[0]).format('YYYY-MM-DD HH:mm:ss')
        this.endtime = moment(val[1]).format('YYYY-MM-DD HH:mm:ss')
      }
    }
  },
  mounted () {
    this.queryPileInfo()
    this.queryTable()
  },
  methods: {
    async queryPileInfo () {
      const { code, data, desc } = await getEquipmentlist({
        stationid: this.$store.state.user.stationId
      })
      if (code == 200) {
        const datalist = data.datalist || []
        this.pileCodes = datalist.map(d => ({ id: d.id + '', name: d.id }))
      } else {
        this.$Message.error(desc)
      }
    },
    async getGunInfo () {
      const { code, data, desc } = await queryPileStatusList({
        devicelist: [this.equipmentid + '']
      })
      if (code == 200) {
        const datalist = data.datalist || []
        const connectorlist = datalist[0] ? datalist[0].connectorlist : []
        const gunNumbers = connectorlist.map(d => ({ id: +d.number, name: d.number }))
        gunNumbers.unshift({
          id: 0,
          name: this.$t('MHexP0WTm4RwL1SLN7FL5')
        })
        this.gunNumbers = gunNumbers
      } else {
        this.$Message.error(desc)
      }
    },
    async queryTable () {
      this.loading = true
      const { code, data, desc } = await queryChargeRecord({
        condition: {
          'equipmentid': this.equipmentid, // 桩编号
          'gunnum': +this.gunnum, // 枪号   0表示不判断枪号 >0有效
          'userid': this.cellPhoneAccount, // 手机端账号
          'cardid': this.icNumber, // 卡号
          'starttime': this.starttime, // 查询起始时间 >=
          'endtime': this.endtime, // 查询结束时间 <=
          'cardpeople': this.cardOwner, // 持卡人
          'carnum': this.carNumber // 车牌号
        }
      })
      if (code == 200) {
        const sumvalue = data.sumvalue
        _.forEach(sumvalue, (v, k) => {
          this[k] = v
        })
        this.data = data.datalist || []
      } else {
        this.$Message.error(desc)
      }
      this.loading = false
    }
  }
}
</script>

<style></style>
